<template>
  <div class="mapModelChat">
    <div class="selectData">
      <el-select v-model="value" placeholder="请选择" size="mini" @change="selectChange">
        <el-option
          v-for="item in options"
          :key="item.itemCode"
          :label="item.itemName"
          :value="item.itemCode"
        >
        </el-option>
      </el-select>
    </div>
    <div id="mapChart" class="mapChart" style="width: 100%;height: 100%;"/>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import resize from '@/utils/mixins/resize'
import { getItemList } from '@/api/common'

export default {
  name: 'MapModelChat',
  mixins: [resize],
  props: {
    mapModelChat: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      myChart: null,
      value: '1',
      options: []
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getItem()
      this.getTendencyChart(this.value)
    })
  },
  created() {
  },
  methods: {
    selectChange(e) {
      this.getTendencyChart(e)
    },
    async getTendencyChart(val) {
      const params = {
        itemCode: val,
        substationId: this.mapModelChat.substationId
      }
      // const params = {
      //   itemCode: '302',
      //   substationId: '1'
      // }
      const res = await this.$http.get('/screenData/getTendencyChart', params)
      if (res.code == '200') {
        this.formattedData(res.data)
      }
    },
    formattedData(data) {
      if (data.length) {
        const standard1 = []
        const standard2 = []
        const monitor = []
        const xAxis = []
        data.forEach(item => {
          standard1.push(item.stdValue1)
          standard2.push(item.stdValue2)
          monitor.push(item.value)
          xAxis.push(item.datatime)
        })
        this.drawLine(standard1, standard2, monitor, xAxis)
      } else {
        this.drawLine([], [], [], [])
      }
    },
    async getItem() {
      getItemList().then((res) => {
        this.options = res.data
      })
    },
    drawLine(standard1, standard2, monitor, xAxis) {
      this.myChart = echarts.init(document.getElementById('mapChart'))
      let option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          // data: ['标准', '监测值']
          y: '6%', // 延Y轴居中
          x: 'right', // 居右显示
          textStyle: { // 设置颜色
            color: '#ffffff'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisTick: {
            alignWithLabel: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#0F6BB2',
              width: 1.5
            }
          },
          axisLabel: {
            show: true,
            // 字体颜色
            textStyle: {
              color: '#fff'
            }
          },
          data: xAxis
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#506093'],
              width: 1,
              type: 'dashed'
            }
          },
          axisTick: {
            alignWithLabel: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#0F6BB2',
              width: 1.5
            }
          },
          axisLabel: {
            show: true,
            // 字体颜色
            textStyle: {
              color: '#fff'
            }
          },
          type: 'value'
        },
        series: [
          {
            name: '标准1',
            type: 'line',
            symbol: 'circle', // 折点设定为实心点
            symbolSize: 10, // 设定实心点的大小
            itemStyle: {
              normal: {
                color: '#65FAFF', // 折点颜色
                lineStyle: {
                  color: '#65FAFF' // 折线颜色
                }
              }
            },
            data: standard1
          },
          {
            name: '标准2',
            type: 'line',
            symbol: 'circle', // 折点设定为实心点
            symbolSize: 10, // 设定实心点的大小
            itemStyle: {
              normal: {
                color: '#65FAFF', // 折点颜色
                lineStyle: {
                  color: '#65FAFF' // 折线颜色
                }
              }
            },
            data: standard2
          },
          {
            name: '监测值',
            type: 'line',
            symbol: 'circle', // 折点设定为实心点
            symbolSize: 10, // 设定实心点的大小
            itemStyle: {
              normal: {
                color: '#01EF9D', // 折点颜色
                lineStyle: {
                  color: '#01EF9D' // 折线颜色
                }
              }
            },
            data: monitor
          }
        ]
      }
      this.myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.mapModelChat {
  width: 100%;
  height: 100%;
  position: relative;

  .selectData {
    z-index: 9999;
    position: absolute;
    top: 5px;
    left: 22px;

    ::v-deep .el-input__inner {
      width: 120px;
      background: #035089;
      color: #65FAFF;
    }
  }

}
</style>
